<template>
  <div class="component ui-house-li">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, index) in swiperListData" :key="index">
            <router-link :to="{ path: '/detail', query: {id: item.id} }">
              <slot :swiperItem="item">插槽内容</slot>
            </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // import Swiper from 'swiper'
  import '../../../../node_modules/swiper/dist/css/swiper.min.css'

  export default {
    name: 'swiperList',
    props: ['swiperListData'],
    data () {
      return {
        activeIndex: ''
      }
    },

    updated () {
      // let mySwiper = new Swiper('.swiper-container', {
      //   slidesPerView: 2.3,
      //   autoPlay: 0
      // })
      // this.activeIndex = mySwiper.activeIndex
    }
  }
</script>
<style lang="less" scoped>
  .swiper-container{
    padding-left: 0.75rem;
    overflow: scroll;
  }
  .swiper-slide{
    overflow: hidden;
    margin-right: 1.0rem;
    width: 10.75rem;
    height: 9.6rem;
    float: left;

  }
</style>
